<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}"/>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
    <style>
        html, body {
            background-color: #F8F8FF;
        }

        .goods {
            width: 50%;
            /*text-align: center;
            margin: 50px auto;*/
        }

        .goods h1 {
            animation: myfirst 2.5s infinite;
            color: #9370DB;
        }

        @keyframes myfirst {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }
    </style>
</head>
<body class="text-center">
<div style="width:23%;position:absolute;margin-top:9%;margin-left:37%;">
    <br/>
    <div class="goods" style="margin:auto;">
        <h1 th:text="#{login.tip}" style="font-size:21px;">学生成绩管理系统</h1>
    </div>
    <br/>
    <form action="#" th:action="@{/login/}" method="post" class="form-horizontal">

        <!--判断-->
        <p th:text="${msg}" th:if="${#strings.isEmpty(msg)}"></p>
        <div>
            <label class="sr-only" th:text="#{login.username}">Username</label>
            <input type="text" name="username" class="form-control" placeholder="Username"
                   th:placeholder="#{login.username}" required="" autofocus="">
        </div>
        <br/>
        <div>
            <label class="sr-only" th:text="#{login.password}">Password</label>
            <input type="password" name="password" class="form-control" placeholder="Password"
                   th:placeholder="#{login.password}" required="" autofocus="">
        </div>
        <br/>
        <div>
            <table>
                <tr>
                    <td style="width:82%;">
                        <label class="sr-only" th:text="#{login.ver-code}">Verification Code</label>
                        <input type="text" name="ver-code" class="form-control" placeholder="Verification Code"
                               th:placeholder="#{login.ver-code}" required="" autofocus="">
                    </td>
                    <td>
                        <a th:href="@{/send}">
                            <btn class="btn btn-info btn-xs"><span th:text="#{login.send}">send</span></btn>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
        <br/>
        <div>
            <a th:href="@{/look}">
                <btn class="btn btn-primary" th:text="#{login.look}">查看账号</btn>
            </a>
            <button class="btn btn-success" type="submit" th:text="#{login.btn}">我要登录</button>
        </div>
        <br/>
        <div>
            <a class="btn btn" th:href="@{/index.html(l='zh_CN')}">中文</a>
            <a class="btn btn" th:href="@{/index.html(l='en_US')}">English</a>
        </div>
    </form>
</div>
</body>
</html>
